<!DOCTYPE html>
<html>
<<<<<<< HEAD
=======
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>复选框（checkbox）全选/全不选/返选</title>
    <style>
      body,
      dl,
      dt,
      dd,
      p {
        margin: 0;
        padding: 0;
      }
      body {
        font-family: Tahoma;
        font-size: 12px;
      }
      label,
      input,
      a {
        vertical-align: middle;
      }
      label {
        padding: 0 10px 0 5px;
      }
      a {
        color: #09f;
        text-decoration: none;
      }
      a:hover {
        color: red;
      }
      dl {
        width: 120px;
        margin: 10px auto;
        padding: 10px 5px;
        border: 1px solid #666;
        border-radius: 5px;
        background: #fafafa;
      }
      dt {
        padding-bottom: 10px;
        border-bottom: 1px solid #666;
      }
      dt label {
        font-weight: 700;
      }
      p {
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <dl>
      <dt>
        <input type="checkbox" id="checkAll" /><label>全选</label
        ><a href="javascript:;">反选</a>
      </dt>
      <dd>
        <p><input type="checkbox" name="item" /><label>选项（一）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（二）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（三）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（四）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（五）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（六）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（七）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（八）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（九）</label></p>
        <p><input type="checkbox" name="item" /><label>选项（十）</label></p>
      </dd>
    </dl>
    <center>1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</center>
    <script>
      
      let selects = document.querySelectorAll("input[name=item]");
      let checkAllIpt = document.querySelector("#checkAll");
      let invertIpt = document.querySelector('dt a')
      let state = getState();
      
      function selectAll() {
        checkAllIpt.checked = true;
        checkAllIpt.nextElementSibling.innerText = "全不选";
        selects.forEach(function(select) {
          select.checked = true;
        });
      }
>>>>>>> bfdccd6da6728471b859587b241dc3435e8daf96

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>复选框（checkbox）全选/全不选/返选</title>
  <style>
    body,
    dl,
    dt,
    dd,
    p {
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Tahoma;
      font-size: 12px;
    }

    label,
    input,
    a {
      vertical-align: middle;
    }

    label {
      padding: 0 10px 0 5px;
    }

    a {
      color: #09f;
      text-decoration: none;
    }

    a:hover {
      color: red;
    }

    dl {
      width: 120px;
      margin: 10px auto;
      padding: 10px 5px;
      border: 1px solid #666;
      border-radius: 5px;
      background: #fafafa;
    }

    dt {
      padding-bottom: 10px;
      border-bottom: 1px solid #666;
    }

    dt label {
      font-weight: 700;
    }

    p {
      margin-top: 10px;
    }
  </style>
</head>

<body>
  <dl>
    <dt>
      <input type="checkbox" id="checkAll" /><label>全选</label><a href="javascript:;">反选</a>
    </dt>
    <dd>
      <p><input type="checkbox" name="item" /><label>选项（一）</label></p>
      <p><input type="checkbox" name="item" /><label>选项（二）</label></p>
      <p><input type="checkbox" name="item" /><label>选项（三）</label></p>
      <p><input type="checkbox" name="item" /><label>选项（四）</label></p>
      <p><input type="checkbox" name="item" /><label>选项（五）</label></p>
      <p><input type="checkbox" name="item" /><label>选项（六）</label></p>
      <p><input type="checkbox" name="item" /><label>选项（七）</label></p>
      <p><input type="checkbox" name="item" /><label>选项（八）</label></p>
      <p><input type="checkbox" name="item" /><label>选项（九）</label></p>
      <p><input type="checkbox" name="item" /><label>选项（十）</label></p>
    </dd>
  </dl>
  <center>1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</center>
  <script>
    let selects = document.querySelectorAll("input[name=item]");
    let checkAllIpt = document.querySelector("#checkAll");
    let invertIpt = document.querySelector('dt a')
    let dd = document.querySelector("dd");
    let state = getState();
    //获取所有选项选择状态函数
    function getState() {
      //选中的状态数组
      let checkedStates = [];
      selects.forEach(function (select) {
        checkedStates.push(select.checked);
      });
      //是否所有元素被选中
      let isAllSelected = checkedStates.every(function (state) {
        return state == true;
      });

      return { checkedStates: checkedStates, isAllSelected: isAllSelected };
    }
    //设置全选输入框
    function setCheckAllIpt(flag) {
      checkAllIpt.checked = flag;
      //修改label文字
      checkAllIpt.nextElementSibling.innerText = flag ? "全不选" : "全选";
    }

    //设置所有选项
    function setAll(flag) {
      console.log(`全选设置为：${flag}`)
      setCheckAllIpt(flag)
      //遍历每个选项，设置状态
      selects.forEach(function (select) {
        select.checked = flag;
      });
      //更新选项选中状态，传给全局变量
      state = getState();
    }
    //监听全选按钮改变
    checkAllIpt.addEventListener("change", function () {
      setAll(checkAllIpt.checked)
    });
    //给所有选项的共同祖先添加事件监听，使用事件代理方案
    dd.onchange = function (e) {
      //更新选项选中状态，传给全局变量
      state = getState();
      //根据是否全选设置全选按钮状态
      setCheckAllIpt(state.isAllSelected)
    };
    //反转
    function invert() {
      
      let isAllSelected = true
      //更新选中状态，把选中状态每一个布尔值反转，即true变为false，false变为true。计算反转之后的全选状态
      state.checkedStates.forEach(function (el, index) {
        //把选中状态数组中每一个布尔值反转
        state.checkedStates[index] = !el;
        //机选反转以后全选的状态
        isAllSelected = isAllSelected && !el
      });
      //把全局状态的全选值更新
      state.isAllSelected = isAllSelected
      //根据全局状态更新选项框
      selects.forEach(function (select, index) {
        select.checked = state.checkedStates[index]
      })
      //更新全选状态
      setCheckAllIpt(state.isAllSelected)
    }

    invertIpt.onclick = invert
  </script>
</body>

</html>